<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件处理</title>
    </head>
    <body>

        <!-- 当 按钮被点击时，会首先调用 onclick 函数，在 onclick 内部再调用 hello 函数 -->
        <button type="button" onclick="hello()">直接在HTML元素上使用onevent方式绑定事件监听器</button>

        <!-- 在 onevent 之后指定的函数参数中使用 this 时，this 表示当前元素本身 -->
        <button type="button" onclick="show(this)">用onevent方式绑定事件监听器并为函数传入参数</button>
        
        <script type="text/javascript">
            function hello(){
                let self = arguments.callee ;
                console.log( '当前函数:' , self );
                let caller = self.caller
                console.log( '函数调用者:' , caller );
                let event = caller.arguments[ 0 ];
                console.log( event );
                let target = event.target ;
                console.log( target );
            }

            function show( x ){
                console.log( x );
            }
        </script>

        <hr>

        <button type="button" class="third">选中元素后再使用onevent方式绑定事件监听器</button>

        <script type="text/javascript">
            let btn = document.querySelector( '.third' ); // 返回匹配浏览器的首个元素
            // let btns = document.getElementsByClassName( 'third' ); // 返回 HTMLCollection 集合
            btn.onclick = function(){
                console.log( arguments[ 0 ] );
            }
        </script>

        <hr>

        <button type="button" class="fourth">选中元素后再使用addEventListener方式绑定事件监听器</button>

        <script type="text/javascript">
            let btns = document.getElementsByClassName( 'fourth' ); // 返回 HTMLCollection 集合
            
            let type = 'click' ;
            let listener = {
                handleEvent(){
                    console.log( arguments[ 0 ] );
                }
            }
            let useCapture = false ;

            btns[0].addEventListener( type , listener , useCapture );
        </script>


    </body>
</html>